<script src="../../../sagitar/build/projectConfig.js"></script>
<template>
  <div id="response_item" class="response-item-panel">
    <Items
      v-for="(item, ind) in scoreItems"
      :key="ind"
      class="fl"
      :title="item.title"
      :active-num="item.activeNum"
      :icon="item.icon"
      :icon-bg="item.iconBg"
      :width="item.width"
      :content-slot="item.contentSlot"
    />
  </div>
</template>

<script>
export default {
  name: 'ResponseItem',
  components: {
    Items: resolve => require(['./scoreItems'], resolve)
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    const { time, error, page } = this.data
    return {
      scoreItems: [
        { title: '平均响应时间', activeNum: time ||  '5ms', icon: 'icon-pingjunshichang', iconBg: '#74BBC9', width: '32%' },
        { title: '错误率', activeNum: error || '0.15%', icon: 'icon-HTTPcuowushuai', iconBg: '#F1725E', width: '32%' },
        { title: '慢页面率', activeNum: page || '0.02%', icon: 'icon-manjiaoyi', iconBg: '#388AEE', width: '32%' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped lang='scss'>
  .response-item-panel {
    width: 100%;
    background-color: transparent;
    height: 80px;
    /*position: fixed;*/
    /*top: 520px;*/
    z-index: 9;
    color: #fff !important;
    text-align: center;
    /*margin-left: 20px;*/

    .fl {
      float:left;
    }
  }
</style>
